<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li><a href="#/home">首页</a></li>
    <li><a href="#/about">关于</a></li>
  </ul>

  <div id="routeView">
    <!-- 放一个代码片段 -->
  </div>

  <script>
    const routes = [
      {
        path: '#/home',
        component: '首页页面内容'
      },
      {
        path: '#/about',
        component: 'about page'
      }
    ]
    
    const routeView = document.getElementById('routeView')

    window.addEventListener('DOMContentLoaded', onHashChange)
    window.addEventListener('hashchange', onHashChange)

    function onHashChange() {
      console.log(location.hash);
      routes.forEach((item, index) => {
        if (item.path === location.hash) {
          routeView.innerHTML = item.component
        }
      })
    }
  </script>
</body>
</html>